<template>
	<div class="menubar"  style="padding-top: 20px">
		<el-menu unique-opened :default-active="active" background-color="#FFFFFF" text-color="#c0c4cc" active-text-color="#F89A37" :router="true">
            <el-menu-item :index="item.path" v-for="item in menus" :key="item.id">
                <i class="el-icon-menu"></i>
                <span slot="title">{{ item.name }}</span>
            </el-menu-item>
		</el-menu>
	</div>
</template>

<script>
	import { mapGetters, mapState } from 'vuex'

	export default {
		data() {
			return {
				active: 'member',
			}
		},
		computed: {
			...mapGetters([
				'menus'
			]),
			...mapState({
				route: state => state.route
			})
		},
		watch: {
			//获取当前URL
			route () {
                this.active = this.$store.state.route.path.substr(7);
			}
		}
	}
</script>

<style lang="scss">
	.el-menu {
		border-right: none;
	}

	.menubar {
		height: 100%;
		width: 200px;
		border-right: none;
		position: fixed;
		top: 51px;
		background-color: #FFFFFF;
	}

	.left-content {
		height: 100%;
		width: 220px;
		background-color: rgb(84, 92, 100);
	}

	.el-menu-item a {
		color: #FFF;
		&:hover {
			text-decoration: none;
		}
	}
    .el-menu-item:hover{
        background-color:rgba(248,154,55,0.15)!important;
        color:rgba(248,154,55,1)!important;
        i{
            color:rgba(248,154,55,1)!important;
        }
    }
	.icon-shouyeshouye {
		font-size: 22px;
	}
	.iconfont {
		margin-right: 5px;
	}

	.router-link-exact-active, .active {
		color: #ffd04b;
		background-color:rgb(41,49,67)
	}
	.el-menu-item.is-active{
		background-color:rgba(248,154,55,0.3) !important;
		border-left: 4px solid rgba(248,154,55,1);
	}
</style>
